<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-form class="mr20" :model="searchForm" inline size="small">
        <el-form-item label="业务员姓名">
          <el-input placeholder="请输入业务员姓名" v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="业务员编号">
          <el-input placeholder="请输入业务员编号" v-model="searchForm.serial_number"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="">
          <el-input placeholder="请输入电话号码" v-model="searchForm.contact_phone" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button size="small" icon="el-icon-search" type="success" @click="handleClickSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="data" size="small" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column label="序号" align="center" type="index"></el-table-column>
        <el-table-column label="业务员编号" prop="sale_num" align="center"></el-table-column>
        <el-table-column label="业务员姓名" prop="name" align="center"></el-table-column>
        <el-table-column label="商户数量" prop="merchant_total" align="center"></el-table-column>
        <el-table-column label="有效订单金额" prop="order_total" align="center"></el-table-column>
        <el-table-column label="有效订单笔数" prop="order_num" align="center"></el-table-column>
        <el-table-column label="累计返佣" prop="order_return_total" align="center"></el-table-column>
        <el-table-column label="佣金详情" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDialogInit(scope.row.sale_num, scope.row.name)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="流水详情" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickRecordInit(scope.row.sale_num, scope.row.name)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="total" layout="total, prev, pager, next, jumper"  class="fr mt20" :current-page.sync="currentPage" :page-size="PageSize" @current-change="handleCurrentChange"></el-pagination>
    </el-row>
    <el-row>
      <el-dialog title="返佣详情" :visible.sync="dialog" width="700px">
        <p>业务员编号：{{ dialogs.sale_num }}  业务员姓名：{{ dialogs.sale_name }}</p>
        <el-form size="small" inline class="mt20" :model="dialogs" ref="dialogs">
          <el-form-item label="时间" prop="time">
            <el-date-picker type="month" class="w200" placeholder="开始时间" v-model="dialogs.begin_time" value-format="yyyy-MM"></el-date-picker>
            -
            <el-date-picker type="month" class="w200" placeholder="结束时间" v-model="dialogs.end_time" value-format="yyyy-MM"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-search" size="small" @click="handleDialogSearch">查询</el-button>
            <el-button type="info" icon="el-icon-delete" size="small" @click="handleResetDialog">清除</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dialog_data" size="small" :header-cell-style="{background:'#f2f2f2'}">
          <el-table-column v-for="col in columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            align="center">
          </el-table-column>
        </el-table>
        <el-row class="clearfixer pb-10">
          <el-pagination :total="dialog_page.total" layout="total, prev, pager, next, jumper"  class="fr mt20" :current-page.sync="dialog_page.current" :page-size="dialog_page.size" @current-change="handleCurrentChangeDialogs"></el-pagination>
        </el-row>
      </el-dialog>
      <el-dialog title="流水详情" :visible.sync="model" width="700px">
        <p>业务员编号：{{ models.sale_num }} &nbsp;  业务员姓名：{{ models.sale_name }}</p>
        <el-form size="small" inline class="mt20" :model="models" ref="models">
          <el-form-item label="时间" prop="time">
            <el-date-picker v-model="models.time" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-search" size="small" @click="handleClickModels">查询</el-button>
            <el-button type="info" icon="el-icon-delete" size="small" @click="handleResetForm">清除</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="model_data" size="small" :header-cell-style="{background:'#f2f2f2'}">
          <el-table-column v-for="col in model_columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            align="center">
          </el-table-column>
        </el-table>
        <el-row class="clearfixer pb-10">
          <el-pagination :total="model_page.total" layout="total, prev, pager, next, jumper"  class="fr mt20" :current-page.sync="model_page.current" :page-size="model_page.size" @current-change="handleCurrentChangeModels"></el-pagination>
        </el-row>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { init, search, page, refundList, recordList } from '@/api/rebate'

export default {
  name: 'rebate',
  components: {
    Breadcrumb
  },
  data() {
    return {
      dialog: false,
      model: false,
      shop_name: '',
      rate: '',
      searchForm: {
        serial_number: '',
        name: '',
        contact_phone: ''
      },
      columns: [
        { id: 'month_data', label: '时间' },
        { id: 'commission_total', label: '累计返佣' },
        { id: 'swipe_total', label: '刷卡支付返佣' },
        { id: 'swipe_number', label: '刷卡支付笔数' },
        { id: 'mob_total', label: '移动支付返佣' },
        { id: 'mob_number', label: '移动支付笔数' }
      ],
      model_columns: [
        { id: 'order_number', label: '订单号' },
        { id: 'order_money', label: '交易金额' },
        { id: 'rate', label: '返佣比例' },
        { id: 'money', label: '应得佣金' },
        { id: 'c_channel', label: '支付方式' },
        { id: 'pay_at', label: '交易时间' },
        { id: 'settlement_at', label: '结算时间' }
      ],
      models: {
        sale_num: '',
        sale_name: '',
        time: ''
      },
      dialogs: {
        sale_num: '',
        sale_name: '',
        begin_time: '',
        end_time: ''
      },
      model_page: {
        total: 0,
        current: 1,
        size: 0
      },
      dialog_page: {
        total: 0,
        current: 1,
        size: 0
      },
      data: [],
      dialog_data: [],
      model_data: [],
      PageSize: 1,
      currentPage: 1,
      total: 10
    }
  },
  methods: {
    handleDialogInit(num, name) {
      this.dialogs.sale_num = num
      this.dialogs.sale_name = name
      this.dialog_data = []
      refundList(this.dialogs).then(res => {
        if (res.data.errorCode === 0) {
          this.dialog_data = res.data.result.monthLists.data
          this.dialog_page.total = res.data.result.monthLists.total
          this.dialog_page.size = res.data.result.monthLists.per_page
          this.dialog_page.current = res.data.result.monthLists.current_page
          this.dialog = true
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickRecordInit(num, name) {
      this.models.sale_num = num
      this.models.sale_name = name
      this.model_data = []
      recordList(this.models).then(res => {
        if (res.data.errorCode === 0) {
          this.model_data = res.data.result.recordLists.data
          this.model_page.total = res.data.result.recordLists.total
          this.model_page.size = res.data.result.recordLists.per_page
          this.model_page.current = res.data.result.recordLists.current_page
          this.model = true
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickModels() {
      recordList(this.models).then(res => {
        if (res.data.errorCode === 0) {
          this.model_data = res.data.result.recordLists.data
          this.model_page.total = res.data.result.recordLists.total
          this.model_page.size = res.data.result.recordLists.per_page
          this.model_page.current = res.data.result.recordLists.current_page
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleCurrentChangeModels(v) {
      recordList(this.models, v).then(res => {
        if (res.data.errorCode === 0) {
          this.model_data = res.data.result.recordLists.data
          this.model_page.total = res.data.result.recordLists.total
          this.model_page.size = res.data.result.recordLists.per_page
          this.model_page.current = res.data.result.recordLists.current_page
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleDialogSearch() {
      refundList(this.dialogs).then(res => {
        if (res.data.errorCode === 0) {
          this.dialog_data = res.data.result.monthLists.data
          this.dialog_page.total = res.data.result.monthLists.total
          this.dialog_page.size = res.data.result.monthLists.per_page
          this.dialog_page.current = res.data.result.monthLists.current_page
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleCurrentChangeDialogs(v) {
      refundList(this.dialogs, v).then(res => {
        if (res.data.errorCode === 0) {
          this.dialog_data = res.data.result.monthLists.data
          this.dialog_page.total = res.data.result.monthLists.total
          this.dialog_page.size = res.data.result.monthLists.per_page
          this.dialog_page.current = res.data.result.monthLists.current_page
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleResetForm() {
      this.$refs['models'].resetFields()
      this.handleClickModels()
    },
    handleResetDialog() {
      this.$refs['dialogs'].resetFields()
      this.dialogs.begin_time = null
      this.dialogs.end_time = null
      this.handleDialogSearch()
    },
    handleClickSearch() {
      search(this.searchForm).then(response => {
        if (response.data.errorCode === 0) {
          this.data = response.data.result.data
          this.total = response.data.result.total
          this.PageSize = response.data.result.pagecount
          this.currentPage = response.data.result.current_page
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleCurrentChange(v) {
      page(this.searchForm, v).then(response => {
        this.data = response.data.result.data
        this.total = response.data.result.total
        this.PageSize = response.data.result.page_size
        this.currentPage = response.data.result.current_page
      })
    }
  },
  created() {
    init().then(response => {
      this.data = response.data.result.data
      this.total = response.data.result.total
      this.PageSize = response.data.result.page_size
    })
  }
}
</script>